<route lang="json5">
{
  style: {
    navigationStyle: 'default',
    navigationBarTitleText: '优惠券',
  },
}
</route>
<template>
  <div class="container py-6 px-4 box-border bg-[#f7f7f7]">
    <div class="top">
      <div class="user-area flex justify-between">
        <div class="left">
          <div class="price text-[24px] text-[#56B756]">￥{{ total }}</div>
          <div class="total text-[14px] text-[#666]">优惠券总金额</div>
        </div>
        <div class="use bg-[#56B756] text-[#fff] box-border text-[15px]" @click="toUse">去使用</div>
      </div>
      <div class="rule text-[14px] text-[#999] py-4">
        {{ coupon_use_describe }}
      </div>
    </div>
    <div class="use-title mb-4 text-[#56B756]" @click="toUseRecord">使用记录</div>
    <div class="use-boxs text-[14px]">
      <div class="use-item" v-for="(item, index) in data" :key="index">
        <div class="data-top flex items-center justify-between">
          <div class="data-type text-[#6BB748]">
            {{ item.receive_type || '观看广告' }}
          </div>
          <div class="price text-[#999]">
            <image
              src="@/static/images/coupon-fill.png"
              mode="widthFix"
              class="w-[15px] icon"
            ></image>
            ￥{{ item.amount }}
          </div>
        </div>
        <div class="date flex items-center justify-between text-[#999]">
          <div class="text-[#666]">获得日期</div>
          <div class="date">
            {{ item.create_time }}
          </div>
        </div>
        <div class="date flex items-center justify-between text-[#999]">
          <div class="text-[#666]">有效期</div>
          <div class="date">
            {{ item.useStart_time }}
            <span class="px-1 text-[#666]">至</span>
            {{ item.useEnd_time }}
          </div>
        </div>
      </div>
    </div>
    <buttonBtn @btnClick="watchAd">
      <template v-slot:pictuer>
        <image class="watch-white" src="@/static/images/watch.png" mode=""></image>
      </template>
      <view>观看广告得优惠券</view>
    </buttonBtn>
  </div>
</template>

<script setup lang="ts">
import { myCoupon } from '@/service/user'

const data = ref<ICoupon[]>([])
const total = ref<number>(0) // 总金额
// eslint-disable-next-line camelcase
const use_coupon = ref<string>('') // 最大核销金额
// eslint-disable-next-line camelcase
const coupon_use_describe = ref<string>('') // 优惠券使用说明
const getList = async () => {
  const res: IResData<IPageCouponRes<ICoupon>> = await myCoupon()
  if (res.code === 1) {
    total.value = res.data?.total || 0
    // eslint-disable-next-line camelcase
    use_coupon.value = res.data?.use_coupon || '0'
    // eslint-disable-next-line camelcase
    coupon_use_describe.value = res.data?.coupon_use_describe || ''
    data.value = res.data.data
  }
}
// 跳转使用记录
function toUseRecord() {
  uni.navigateTo({
    url: '/pages/coupon/records/index',
  })
}

// 跳转看广告
function watchAd() {
  uni.navigateTo({
    url: '/pages/advertisement/index',
  })
}
const toUse = () => {
  uni.navigateTo({
    url: '/pages/coupon/use/index',
  })
}
onShow(async () => {
  await getList()
})
</script>
<style scoped>
.container {
  min-height: 100vh;
  padding-bottom: 64px;
}
.use {
  width: 134rpx;
  height: 60rpx;
  line-height: 60rpx;
  text-align: center;
  border-radius: 8rpx;
}
.use-title {
  text-align: right;
}

.use-item {
  display: flex;
  gap: 28rpx;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 30rpx;
  padding: 30rpx;
  width: 100%;
  border-radius: 10px;
  background: #ffffff;
  box-sizing: border-box;
}

.icon {
  vertical-align: inherit;
}

.watch-white {
  width: 22px;
  height: 22px;
  margin-right: 6px;
}
</style>
